<template>
  <view class="office">
    <view class="label-view flex-r m-t40 m-b40">
      <text class="label text-700-132">为您推荐最新好职位</text>
      <image class="label-bg" src="@/static/images/home/label-bg.png" />

      <!-- <view class="flex" @click="getOffice">
        <image class="square-30" src="@/static/images/home/refresh.png" />
        <text class="m-l10 text-500-324">换一批</text>
      </view> -->
    </view>

    <view class="list-view p-h20">
      <view v-for="(item, index) in list" :key="index" class="card flex" @click="toDetailsPage(item.id)">
        <image class="cover" :src="item.images" mode="aspectFill" />

        <view class="flex-1 flex-d-sb h">
          <view class="flex">
            <text class="flex-1 p-h20 text-700-130">{{ item.title }}</text>
            <text class="text-700-530">{{ item.money_range }}</text>
          </view>

          <view class="flex p-h20">
            <text v-for="(item1, index1) in getTags(item.fringe)" :key="index1" class="tag m-r10 text-500-324">
              {{ item1 }}
            </text>
          </view>

          <view class="flex">
            <text class="flex-1 p-h20 text-500-326">{{ item.company.title }}</text>
            <text class="text-500-326">{{ timeFormat(item.createtime * 1000) }} 发布</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { Office } from '@/types/api.d.ts'

import { formatQuery, genStaticUrl, timeFormat } from '@/utils/utils'

const list = ref<Office[]>([])

onMounted(() => {
  getOffice()
})

const getOffice = async (isLoading: boolean = true) => {
  if (isLoading) {
    uni.showLoading({ title: '加载中...', mask: true })
  }
  const params = {}

  const res = await uni.$u.get<Office[]>('/position/zxtjlst', params)

  if (res.code === 1) {
    list.value = res.data
  }

  if (isLoading) {
    uni.hideLoading()
  }
}

const getTags = (value: string) => {
  console.log(value, 123)
  return value?.split(',')
}

const toDetailsPage = (id: number) => {
  const params = { id }

  uni.navigateTo({ url: formatQuery('/pages/office/home/home', params) })
}
</script>

<style lang="scss" scoped>
.office {
  padding-bottom: 120rpx;
}

.label-view {
  position: relative;
  height: 46rpx;

  .label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .label-bg {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 175rpx;
    height: 46rpx;
  }
}

.list-view {
  min-height: 300rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;
}

.card {
  height: 190rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #EEEEEE;

  .cover {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
  }

  .tag {
    height: 44rpx;
    padding: 0 10rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 44rpx;
    background-color: #F3F3F3;
  }
}
</style>
